<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator="/" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">首页</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="nx-content">
      <el-row :gutter="12">
        <el-col :span="6">
          <el-card shadow="hover" class="card-item" style="background-color: #1976d2;">
            <div class="card-title">
              当日发放
              <div class="card-data">{{ todayTotal.putout }}</div>
            </div>
            <!-- <div class="icon"><img src="../../../assets/xunhuan.png" alt="" /></div> -->
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="card-item" style="background-color: #388e3c;">
            <div class="card-title">
              当日收集
              <div class="card-data">{{ todayTotal.collect }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="card-item" style="background-color: #ef6c00;">
            <div class="card-title">
              发往清洗
              <div class="card-data">{{ todayTotal.send }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="card-item" style="background-color: #6a1b9a;">
            <div class="card-title">
              洗衣厂送回
              <div class="card-data">{{ todayTotal.receive }}</div>
            </div>
            <div></div>
          </el-card>
        </el-col>
      </el-row>
      <div class="main">
        <div class="left-content">
          <div id="chartBox" class="flexc">
            <div id="Bar1" class="BarOne" ref="BarOne"></div>
          </div>
        </div>
        <div class="right-content">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>消息通知</span>
            </div>
            <div v-for="item in messageList" :key="item.id" class="msg-item">
              <span>{{ item.title }}</span>
              <span>{{ item.date }}</span>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getMessage, clothesDayTotal } from "@/api/home";
export default {
  components: {},
  data() {
    return {
      todayTotal: {
        putout: 0,
        collect: 0,
        send: 0,
        receive: 0,
      },
      messageList: [],
    };
  },
  mounted() {
    this.getMessageList();

    // 获取当日统计数据
    this.getDayData();

    // 获取当月日统计图表数据
    this.getMonthLineData();

    // 监听屏幕宽度
    window.onresize = () => {
      return (() => {
        this.chartssize(document.getElementById("chartBox"), document.getElementById("Bar1"));
      })();
    };
  },
  methods: {
    // 查询列表
    getMessageList() {
      getMessage().then((res) => {
        if (res.code == 200) {
          this.messageList = res.data;
        }
      });
    },
    // 获取当日统计数据
    getDayData() {
      let today = this.formatteDate(new Date());
      clothesDayTotal({ startdate: today, enddate: today }).then((res) => {
        if (res.code == 200) {
          this.todayTotal = res.data[0];
        }
      });
    },
    // 获取当月日统计图表数据
    getMonthLineData() {
      let startDate = this.formatteDate(new Date(new Date().getFullYear(), new Date().getMonth(), 1));
      let endDate = this.formatteDate(new Date());
      clothesDayTotal({ startdate: startDate, enddate: endDate }).then((res) => {
        if (res.code == 200) {
          this.$nextTick(() => {
            this.initBarData(res.data);
          });
        }
      });
    },
    // 初始格式化日期
    formatteDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date
        .getDate()
        .toString()
        .padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    initBarData(data) {
      let putoutList = [];
      let collectList = [];
      let sendList = [];
      let receiveList = [];
      let dateList = [];
      for (let i = 0; i < data.length; i++) {
        putoutList.push(data[i].putout);
        collectList.push(data[i].collect);
        sendList.push(data[i].send);
        receiveList.push(data[i].receive);
        dateList.push(data[i].time);
      }
      let chartDom = echarts.getInstanceByDom(document.getElementById("Bar1")); //获取已有echarts实例的DOM节点
      if (chartDom == null) {
        // 节点不存在，进行初始化
        chartDom = echarts.init(document.getElementById("Bar1"));
      }
      // const barData = [];
      // this.tableData.forEach((item) => {
      //   barData.push(item.dept);
      // });
      const option = {
        title: {
          x: "center",
          text: "当月日统计表",
        },
        color: ["#5470c6", "#91cc75", "#fac858", "#ee6666"],
        tooltip: {},
        legend: {
          y: "bottom",
        },
        xAxis: { type: "category", name: "时间", data: dateList },
        yAxis: {
          type: "value",
          name: "数量",
        },
        series: [
          { type: "bar", name: "当日发放", data: putoutList },
          { type: "bar", name: "当日回收", data: collectList },
          { type: "bar", name: "当日送洗", data: sendList },
          { type: "bar", name: "当日清洗送回", data: receiveList },
        ],
      };
      chartDom.setOption(option);
      window.addEventListener("resize", chartDom.resize);
    },
    chartssize(container, charts) {
      function getStyle(el, name) {
        if (window.getComputedStyle) {
          return window.getComputedStyle(el, null);
        } else {
          return el.currentStyle;
        }
      }
      var wi = getStyle(container, "width").width;
      var hi = getStyle(container, "height").height;
      charts.style.width = wi;
      charts.style.height = hi;
    },
  },
};
</script>
<style lang="less" scoped>
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;
  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;
    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }
    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}
.card-item {
  // color: white;
  height: 100px;
  display: flex;
  flex-direction: column;
  .card-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: 0.0125em;
    color: white;
  }
  .icon {
  }
}
.msg-item {
  display: flex;
  justify-content: space-between;
}
.main {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  width: 100%;
  height: 100%;
  .left-content {
    width: 60%;
    height: 100%;
    .flexc {
      // width: 70%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2rem;
      .BarOne {
        width: 56.25rem;
        height: 30.25rem;
      }
    }
  }
  .right-content {
    width: 50%;
    height: 100%;
    margin-top: 1rem;
  }
}
</style>
